<template>
	<view class="content">
		<view class="search-bar">
			<view class="search-bar-box">
				<image class="search-span" src="../../static/search.png" />
				<input type="text" value="" placeholder="请输入搜索内容" class="search-text" maxlength="10"
					@click="toclassification" />
				<button class="search-btn">搜索</button>
				<!-- v-model="this.getdata" -->
			</view>
		</view>
		<!-- 轮播图 -->
		<view>
			<swiper circular indicator-dots autoplay class="swiper">
				<swiper-item class="swiperitem">
					<image
						src="https://lnnu-tuchuang.oss-cn-guangzhou.aliyuncs.com/farm/2023-03-19/f799c110-1412-4310-8b11-eeff1e2b7e7a8588659490408123827.jpg">
					</image>
				</swiper-item>
				<swiper-item class="swiperitem">
					<image
						src="https://lnnu-tuchuang.oss-cn-guangzhou.aliyuncs.com/farm/2023-03-19/85108814-eef5-42e5-9879-f9035306e16b8180200727266283091.jpg">
					</image>
				</swiper-item>
				<swiper-item class="swiperitem">
					<image
						src="https://lnnu-tuchuang.oss-cn-guangzhou.aliyuncs.com/farm/2023-03-19/2b3396b4-b941-44c4-bab5-cf73db0ec714785940085884926055.jpg">
					</image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 功能 -->
		<view class="grid">
			<div class="gridTop">
				<view class="gridItem" @click="()=>onClickLogo(1)">
					<image src="../../static/activity/comp2.svg" alt=""></image>
					<text>周边服务</text>
				</view>
				<view class="gridItem" @click="()=>onClickLogo(2)">
					<image src="../../static/activity/ho.svg" alt=""></image>
					<text>酒店民宿</text>
				</view>
				<view class="gridItem" @click="()=>onClickLogo(3)">
					<image src="../../static/activity/bus.svg" alt=""></image>
					<text>汽车票</text>
				</view>
				<view class="gridItem" @click="()=>onClickLogo(3)">
					<image src="../../static/activity/bea.svg" alt=""></image>
					<text>景区景点</text>
				</view>
			</div>
			<div class="gridBottom">
				<view class="gridItem" @click="onClickLogo(4)">
					<image src="../../static/activity/food.svg" alt=""></image>
					<text>美食</text>
				</view>
				<view class="gridItem" @click="onClickLogo(6)">
					<image src="../../static/activity/pho.svg" alt=""></image>
					<text>精美图片</text>
				</view>
				<view class="gridItem" @click="onClickLogo(5)">
					<image src="../../static/activity/share.svg" alt=""></image>
					<text>游记分享</text>
				</view>
				<view class="gridItem" @click="()=>onClickLogo(3)">
					<image src="../../static/activity/road.svg" alt=""></image>
					<text>路线</text>
				</view>
			</div>
		</view>
		
		<!-- pic -->
		<view class="btom">
			<view class="text">
				精美图片
			</view>
			<view class="insert">
				<view class="pho">
					<image src="../../static/meta-universe/微信图片_20230319143013.jpg"></image>
				</view>
				
				<view class="pho">
					<image src="../../static/meta-universe/微信图片_20230319143136.jpg"></image>
				</view>
				<view class="pho">
					<image src="../../static/meta-universe/微信图片_20230319143139.jpg"></image>
				</view>
				<view class="pho">
					<image src="../../static/meta-universe/微信图片_20230319143143.jpg"></image>
				</view>
				<view class="pho">
					<image src="../../static/meta-universe/微信图片_20230319143146.jpg"></image>
				</view>
				<view class="pho">
					<image src="../../static/meta-universe/微信图片_20230319143150.jpg"></image>
				</view>
				<view class="pho">
					<image src="../../static/meta-universe/微信图片_20230319143045.jpg"></image>
				</view>
				<view class="pho">
					<image src="../../static/meta-universe/微信图片_20230319143048.jpg"></image>
				</view>
				<view class="pho">
					<image src="../../static/meta-universe/微信图片_20230319143053.jpg"></image>
				</view>
				<view class="pho">
					<image src="../../static/meta-universe/微信图片_20230319143057.jpg"></image>
				</view>
				<view class="pho">
					<image src="../../static/meta-universe/微信图片_20230319143100.jpg"></image>
				</view>
				<view class="pho">
					<image src="../../static/meta-universe/微信图片_20230319143104.jpg"></image>
				</view>
				<view class="pho">
					<image src="../../static/meta-universe/微信图片_20230319143106.jpg"></image>
				</view>
				
				<view class="pho">
					<image src="../../static/meta-universe/微信图片_20230319143110.jpg"></image>
				</view>
				<view class="pho">
					<image src="../../static/meta-universe/微信图片_20230319143113.jpg"></image>
				</view>

			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 100vw;
	}

	.search-bar {
		width: 100%;
		height: 100rpx;
		margin-top: 3%;
	}

	.search-bar-box {
		display: flex;
		margin: 0 auto;
		width: 620rpx;
		height: 70rpx;
		border: 5rpx solid #ff5500;
		border-radius: 50rpx;
	}

	.search-span {
		width: 15%;
		height: 56rpx;
		margin-top: 6rpx;
		margin-left: 30rpx;
	}

	.search-text {
		width: 100%;
		margin-top: 10rpx;
		margin-left: 10rpx;
		font-size: 30rpx;
		color: #7f7f81;
	}

	.search-btn {
		background-color: #ca4322;
		/* Green */
		color: white;
		text-align: center;
		display: inline-block;
		font-size: 35rpx;
		width: 240rpx;
		height: 70rpx;
		line-height: 65rpx;
		border-radius: 30rpx;
		letter-spacing: 3rpx;
	}


	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.swiper {
		width: 95vw;
		height: 180px;
		margin: 0 0px 0 2.5vw;
		border: 0;
	}

	.swiperitem image {
		width: 100%;
		height: 100%;
		margin: 0 0px 0 0px;
		border-radius: 10px;
	}

	@keyframes appear {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}


	.grid {
		width: 90vw;
		margin-left: 5vw;
		margin-right: 5vw;
		margin-top: 3vh;
		// transform: translate(0, -25%);
		background-color: #fff;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
		border-radius: 10px;
		animation: appear 2s ease 0s 1 normal forwards;

		.gridTop {
			display: flex;
			justify-content: space-around;
			padding-top: 10px;
		}

		.gridBottom {
			display: flex;
			justify-content: space-around;
			margin-top: 0rpx;
		}

		.gridItem {
			text-align: center;
			width: 25vw;
			height: 25vw;
			// margin: 20rpx;

			image {
				width: 23vw;
				height: 13vw;
			}

			text {
				font-size: 1.1em;
				font-family: "微软雅黑", monospace;
				font-weight: 500;
			}
		}
	}
	
	
	.btom {
		width: 90vw;
		margin-left: 5vw;
		margin-right: 5vw;
		margin-top: 3vh;
		.text {
			border-left: 5px solid #cc6262;
			font-size: 20px;
			padding-left: 10px;
			font-family: "微软雅黑", monospace;
			font-weight: 500;
		}
		.insert {
			margin-top: 2vh;
			.pho {
				display: inline-block;
				width: 48%;
				height: 130px;
				image {
					width: 100%;
					height: 100%;
					border-radius: 10px;
				}
			}
			.pho:nth-child(even) {
				margin-left: 2%;
			}
		}
	}
</style>
